<template>
  <div class="page page3">
    <div class="contain">
      <p class="pageTxt animate__animated animate__bounceIn animate__delay-1s">社区模块</p>
      <!-- <p class='animate__animated animate__slideInDown animate__delay-1s' style="font-size: 30px; text-align: center;"></p> -->
      <div class='contents3'>
        <div class='left-box animate__animated animate__rotateInDownRight animate__delay-1s'>
          <img class="left-box-img" src="https://g.alicdn.com/teambition-site/site/webpack/images/client/app/images/pan/audio_9004b9c856a567b6d3bfea7f2199255e.gif"></img>
        </div>
        <div class='right-box animate__animated animate__rotateInDownLeft animate__delay-1s'>
          <p style='font-weight: 600; font-size: 28px;'>不仅存储,还有更有趣的社区空间，你可以和洋盘用户在社区上发布你的瞬间，留下你美好回忆</p>
          <div style="font-size: 20px; margin-top: 20px; color: #336a99;">在你晒出瞬间同时,并发表评论，每个人都能弄清楚讨论的上下文。</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
</script>

<style scoped="scoped">
  .page3 .contents3 {
  	display: flex;
  	width: 86%;
  	justify-content: space-around;
  	margin-top: 40px;
  	padding: 0 20px;
  }

  .page3 .left-box-img {
  	width: 750px;
  	height: 500px;
  }

  .page3 .right-box {
  	padding: 0 40px;
  }

  /*平板*/
  @media screen and (min-width:600px) and (max-width:960px){
    .page3 .contents3 {
    	display: flex;
      flex-direction: column;
    	width: 86%;
    	justify-content: space-around;
    	margin-top: 40px;
    	/* padding: 0 20px; */
    }

    .page3 .left-box-img {

    	width: 100%;
    	height: 400px;
    }

    .page3 .right-box {
      margin-top: 20px;
    	padding: 0;
    }
  }

  /*手机*/
  @media screen and (max-width:600px){
      .page3 .contents3 {
      	display: flex;
        flex-direction: column;
      	width: 86%;
      	justify-content: space-around;
      	margin-top: 40px;
      	padding: 0 20px;
      }

      .page3 .left-box-img {
      	width: 100%;
      	height: 200px;
      }

      .page3 .right-box {
        margin-top: 20px;
      	padding: 0;
        
      }
  }
</style>
